<template>
  <div class="app-container calendar-list-container">
    <el-row>
      <el-col :span="24">
        <YcTableSearch
          :shipList="shipList"
          @searchEvent="searchEvent"
          @refreshEvent="refreshEvent"
        >
        </YcTableSearch>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <YcTable
          :list="list"
          @handleSelectionChange="handleSelectionChange"
          :options="options"
          :columns="columns"
          :operates="operates"
        >
        </YcTable>
        <div class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="listQuery.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="listQuery.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import YcTable from "@/components/YcTable";
import YcTableSearch from "@/components/YcTableSearch";
export default {
  name: "helmet",
  components: {
    YcTable,
    YcTableSearch,
  },
  computed: {},
  data() {
    return {
      shipList: [
        { value: 1, label: "禹创一号" },
        { value: 2, label: "New SSNINMKM" },
        { value: 3, label: "New CHINA HONGKOP" },
      ],
      list: [], // table数据
      listQuery: {
        page: 1,
        limit: 20,
        systemname: undefined,
      },
      total: null,
      // table的参数
      options: {
        stripe: true, // 是否为斑马纹 table
        loading: false, // 是否添加表格loading加载动画
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        mutiSelect: false, // 是否支持列表项选中功能
      },
      // 需要展示的列
      columns: [
        {
          prop: "meterid",
          label: "船舶ID",
          align: "center",
        },
        {
          prop: "title",
          label: "船舶",
          align: "center",
          formatter: (row) => {
            //row, column, cellValue
            console.log(row.isenable);
            console.log(row);
            return `<span style="white-space: nowrap;color: dodgerblue;">${row.metername}</span>`;
          },
        },
        {
          prop: "meteraddress",
          label: "摄像机名称",
          align: "center",
        },
        {
          prop: "magnification",
          label: "报警类型",
          align: "center",
        },
        {
          prop: "manufacturer",
          label: "报警实时图片",
          align: "center",
        },
        {
          prop: "metermodel",
          label: "报警时间",
          align: "center",
        },
        {
          prop: "meterrule",
          label: "创建时间",
          align: "center",
        },
        {
          prop: "cabinetnum",
          label: "经度",
          align: "center",
        },
        {
          prop: "remark",
          label: "纬度",
          align: "center",
        },
        // {
        //   prop: "isenable",
        //   label: "是否有效",
        //   align: "center",
        //   render: (h, params) => {
        //     return h(
        //       "span",
        //       {},
        //       params.row.isenable === "1"
        //         ? "是"
        //         : params.row.isenable === "2"
        //         ? "否"
        //         : ""
        //     );
        //   },
        // },
      ],
      // 列操作按钮
      operates: {
        width: 150,
        list: [
          {
            id: "1",
            label: "编辑",
            style: "cursor:pointer;color: #409eff;",
            show: true,
            class: "el-icon-edit",
            plain: true,
            method: (scope, row) => {
              console.log(scope);
              console.log(row);
              this.handleEdit(row);
            },
          },
          {
            id: "2",
            label: "删除",
            style: "cursor:pointer;color: #b3450e;",
            class: "el-icon-delete",
            show: true,
            plain: false,
            method: (index, row) => {
              this.handleDel(row);
            },
          },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //查询
    searchEvent(val) {
      alert(val);
      console.log("val:", val);
    },
    //重置
    refreshEvent() {
      alert(11);
      console.log(11);
    },
    // 选中行
    handleSelectionChange(val) {
      console.log("val:", val);
    },
    // 编辑
    handleEdit(index, row) {
      console.log(" index:", index);
      console.log(" row:", row);
    },
    // 删除
    handleDel(index, row) {
      console.log(" index:", index);
      console.log(" row:", row);
    },

    getList() {
      console.log(this.listQuery);
      //请求数据
      /*page(this.listQuery).then((response) => {
        this.list = response.data.rows;
        this.total = response.data.total;
      });*/
    },
    handleSizeChange(val) {
      console.log(`每页${val} 条`);
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页${val}`);
      this.listQuery.page = val;
      this.getList();
    },
  },
};
</script>